/**
 * components/Row.js
 * Define your component using platform-independent primitives
 */
import React from "react";

import {
  View, StyleSheet, Image, Text, TouchableOpacity,
} from "react-native";
import PropTypes from "prop-types";

import {
  Color, ScreenWidth, scale, FontSize,
} from "../../common/index";

const RowChooseItem = props => {
  const {
    name, value, onPress, disabled,
  } = props;
  return (
    <TouchableOpacity onPress={onPress} disabled={disabled}>
      <View style={styles.rowItemContainer}>
        <View style={styles.rowItemSubContainer}>
          <Text style={styles.textDesc}>{name}</Text>
          <Text style={styles.textValue} numberOfLines={1}>
            {value}
          </Text>
        </View>
        <View style={styles.imgArrow}>
          {!disabled && <Image style={styles.imgArrow} source={require("../../img/ic_arrow_right.png")} />}
        </View>
      </View>
    </TouchableOpacity>
  );
};

RowChooseItem.propsTypes = {
  name: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
  onPress: PropTypes.func,
};

RowChooseItem.defaultProps = {
  disabled: false,
  onPress: () => {},
};

const styles = StyleSheet.create({
  rowItemContainer: {
    width: ScreenWidth,
    height: scale * 48,
    flexDirection: "row",
    paddingHorizontal: scale * 16,
    alignItems: "center",
  },
  rowItemSubContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  textDesc: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_desc,
    marginRight: scale * 18,
  },
  textValue: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_desc,
    flex: 1,
  },
  imgArrow: {
    width: scale * 20,
    height: scale * 20,
  },
});

export default RowChooseItem;
